<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue模态框</title>
</head>
<script src="./vue.js"></script>

<body>
    <!--组件模板-->
    <template id="child">
  <div>
    <div class="dialog-warp">
      <div class="dialog-cover" v-if="isShow" @click="closeMyself"></div>
      <transition name="drop">
        <div class="dialog-content" v-if="isShow">
            <h3 class="dialog-title">{{title}}</h3>
          <p class="dialog-close" @click="closeMyself">X</p>
          <slot>empty</slot>
          
          <div class="dialog-cancel" @click="closeMyself">取消</div>
          <div class="dialog-ok" @click="confirm">确定</div>
        </div>
      </transition>
    </div>
  </div>
</template>

    <div id="parent">
        <v-dialog :is-show="isShowModal" @on-close="closeModal" @on-confirm="closeModal">
            <p>
                {{msg}}
            </p>
            <p>
                {{msg}}
            </p>
            <p>
                {{msg}}
            </p>
        </v-dialog>

        <Button @click="openModal">打开模态框</Button>
    </div>
</body>
<script>
    let VDialog = Vue.extend({
        template: '#child',
        props: {
            isShow: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            closeMyself() {
                this.$emit('on-close')
            },
            confirm() {
                this.$emit('on-confirm')
            }
        },
        data() {
            return {
                title: 'Basic Modal'
            }
        }
    });



    new Vue({
        el: "#parent",
        data: {
            isShowModal: false,
            msg: 'Some contents...',
        },
        components: {
            'VDialog': VDialog
        },
        methods: {
            openModal() {
                this.isShowModal = true;

            },
            closeModal() {

                this.isShowModal = false;
            }
        }
    })
</script>
<style>
    .drop-enter-active {
        transition: all .5s ease;
    }
    
    .drop-leave-active {
        transition: all .3s ease;
    }
    
    .drop-enter {
        transform: translateY(-500px);
    }
    
    .drop-leave-active {
        transform: translateY(-500px);
    }
    
    .dialog-wrap {
        position: fixed;
        width: 100%;
        height: 100%;
    }
    
    .dialog-cover {
        background: #000;
        opacity: .3;
        position: fixed;
        z-index: 5;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .dialog-content {
        width: 50%;
        position: fixed;
        max-height: 50%;
        overflow: auto;
        background: #fff;
        top: 20%;
        left: 50%;
        margin-left: -25%;
        z-index: 10;
        border: 1px solid #555;
        padding: 30px 10px 40px;
        line-height: 1.6;
    }
    
    .dialog-title {
        position: absolute;
        left: 20px;
        top: 10px;
        margin: 0;
        line-height: 20px;
        text-align: center;
    }
    
    .dialog-close {
        position: absolute;
        right: 5px;
        top: 5px;
        width: 20px;
        height: 20px;
        margin: 0;
        line-height: 20px;
        text-align: center;
        cursor: pointer;
    }
    
    .dialog-close:hover {
        color: #555;
    }
    
    .dialog-cancel {
        height: 32px;
        line-height: 32px;
        width: 64px;
        text-align: center;
        color: #000;
        cursor: pointer;
        background-color: #fff;
        position: absolute;
        bottom: 10px;
        right: 74px;
        border: #ccc 1px solid;
    }
    
    .dialog-ok {
        height: 32px;
        line-height: 32px;
        width: 64px;
        text-align: center;
        color: #fff;
        cursor: pointer;
        background-color: #1890ff;
        position: absolute;
        bottom: 10px;
        right: 5px;
    }
</style>


</html>